export default () => {
    var eleImg = document.querySelector("#img")

    // 设置eleImg的top属性为0
    eleImg.style.top = 0;
    // 图片高度设置为屏幕高度
    eleImg.style.height = window.innerHeight + 'px';
    // 记录原始高度
    let originHeight = eleImg.height
    // 图片居中
    eleImg.style.left = (window.innerWidth - eleImg.offsetWidth) / 2 + 'px';
//     图片的原始比例，这个地方以高度为基准，宽度跟随高度
    let rate = eleImg.naturalWidth / eleImg.naturalHeight
    var store = {
        scale: 1,
        pageX: 0,
        pageY: 0,
        angle: 0,
    };
    // 缩放事件的处理
    eleImg.addEventListener('touchstart', function (event) {
        var touches = event.touches;
        var events = touches[0];
        var events2 = touches[1];

        event.preventDefault();

        store.moveable = true;

        if (events2) {
            store.pageX2 = events2.pageX;
            store.pageY2 = events2.pageY;
        } else {
            // 第一个触摸点的坐标
            store.pageX = events.pageX;
            store.pageY = events.pageY;
        }

        store.originScale = store.scale || 1;
    });
    eleImg.addEventListener('touchmove', function (event) {
        if (!store.moveable) {
            return;
        }

        event.preventDefault();

        var touches = event.touches;
        var events = touches[0];
        var events2 = touches[1];
        // 双指移动
        if (events2) {
            // 1、角度逻辑
            let angle = Math.atan2(events2.pageY - events.pageY, events2.pageX - events.pageX) * 180 / Math.PI;


            // 必须取得整数
            if (angle <= 0) {
                store.angle = angle
                // console.log(store.angle)
            }

            if (!store.pageX2) {
                store.pageX2 = events2.pageX;
            }
            if (!store.pageY2) {
                store.pageY2 = events2.pageY;
            }

            // 2、缩放逻辑
            var getDistance = function (start, stop) {
                return Math.hypot(stop.x - start.x, stop.y - start.y);
            };
            var zoom = getDistance({
                    x: events.pageX,
                    y: events.pageY
                }, {
                    x: events2.pageX,
                    y: events2.pageY
                }) /
                getDistance({
                    x: store.pageX,
                    y: store.pageY
                }, {
                    x: store.pageX2,
                    y: store.pageY2
                });
            zoom /= 3
            if (zoom > 3) {
                zoom = 3;
            }
            store.scale = zoom;
            // 需要根据在之前的缩放比例基础上进行缩放
            let newHeight = originHeight * zoom;
            let newWidth = newHeight * rate
            eleImg.style.width = newWidth + "px"
            eleImg.style.height = newHeight + "px"
            // 3、图片位置偏移逻辑
            // //     3-1、计算偏移量
            //     let xOffset = (newWidth - eleImg.offsetWidth) / 2
            //     let yOffset = (newHeight - eleImg.offsetHeight) / 2
            // //     3-2、计算偏移后的坐标
            //     let newX = eleImg.offsetLeft - xOffset
            //     let newY = eleImg.offsetTop - yOffset
            // //     3-3、设置偏移后的坐标
            //     eleImg.style.left = newX + "px"
            //     eleImg.style.top = newY + "px"
        } else {
            //     相对于上一次的偏移量
            var xOffset = events.pageX - store.pageX;
            var yOffset = events.pageY - store.pageY;
            // 记住当前坐标
            store.pageX = events.pageX;
            store.pageY = events.pageY;
            // 图像应用偏移效果
            eleImg.style.left = eleImg.offsetLeft + xOffset + 'px';
            eleImg.style.top = eleImg.offsetTop + yOffset + 'px';
        }
    });

    document.addEventListener('touchend', function () {
        store.moveable = false;
        // 修改新的图片高度
        originHeight = eleImg.height
        delete store.pageX2;
        delete store.pageY2;
    });
    document.addEventListener('touchcancel', function () {
        store.moveable = false;

        delete store.pageX2;
        delete store.pageY2;
    });
}
